
<template>
    <div>
      <el-container>
        <el-aside :class="isCollapse ? 's' : 'w'">
          <div class="logo" v-show="!isCollapse"></div>
          <div class="logo" v-show="isCollapse"></div>
          <el-menu
            :default-active="editableTabsValue"
            class="el-menu-vertical-demo"
            @select="handleOpen"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse="isCollapse">
            <el-menu-item index="1" @click="ck(1, '首页')">
              <i class="el-icon-house"></i>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="2" @click="ck(2, '商品管理')">
              <i class="el-icon-document"></i>
              <span slot="title">商品管理</span>
            </el-menu-item>
            <el-menu-item index="3" @click="ck(3, '用户管理')">
              <i class="el-icon-setting"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>其他</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4" @click="ck(4, '页面1')"
                  >页面1</el-menu-item
                >
                <el-menu-item index="5" @click="ck(5, '页面2')"
                  >页面2</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
         <!-- 右侧内容区域 -->
        <el-container>
          <el-header>
            <el-menu
              :default-active="tabIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <div class="menu-icon" @click="isCollapse1">
                <i class="el-icon-menu"></i>
              </div>
  
              <el-menu-item
                @click="ck1(String(index1 + 1), String(shu1))"
                v-for="(shu1, index1) in shu"
                :key="index1"
                :index="String(index1 + 1)"
                >{{ shu1 }}</el-menu-item
              >
              <span
                style="
                  float: right;
                  width: 100px;
                  height: 50px;
                  margin-left: 100px;
                "
              >
                <img
                  @click="qiehuan"
                  style="
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    margin-top: 5px;
                  "
                  src="./zizujian/time.png"
                  alt=""
                />
                <div
                  style="
                    position: absolute;
                    margin-top: 55px;
                    display: flex;
                    flex-wrap: wrap;
                  "
                  v-show="qiehuan1"
                >
                  <div
                    style="
                      margin-left: 70px;
                      width: 0;
                      height: 0;
                      border-left: 5px solid transparent;
                      border-right: 5px solid transparent;
                      border-bottom: 10px solid #fff;
                    "
                  ></div>
                  <div style="width: 100px; height: 70px; background-color: #fff">
                    <div
                      style="
                        width: 100px;
                        height: 30px;
                        line-height: 30px;
                        margin-top: 5px;
                      "
                      class="jianbuian"
                      @click="ck(1, '首页'), (qiehuan1 = false)"
                    >
                      个人中心
                    </div>
                    <div
                      style="width: 100px; height: 30px; line-height: 30px"
                      class="jianbuian"
                      @click="ck('denglu')"
                    >
                      退出登录
                    </div>
                  </div>
                </div>
              </span>
            </el-menu>
          </el-header>
          <el-main>
            <div style="height: 25px; display: flex; margin-bottom: 10px">
              <div style="width: 55px"></div>
              <div
                style="margin-right: 5px; height: 25px; border-radius: 5px"
                v-for="(shu1, index) in shu"
                :key="index"
                @click="SHU1(index)"
                :class="SHUshu == index ? 'SHU' : 'SHU1'"
                @mouseover="yiru(index)"
                @mouseout="yiru(-1)"
              >
                {{ shu1 }}
                <i
                  v-show="index == cloSable"
                  class="el-icon-close"
                  @click="ckx(index)"
                ></i>
              </div>
            </div>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        shu: ["首页"],
        cloSable: -1,
        isCollapse: true,
        qiehuan1: false,
        editableTabsValue: "1",
        tabIndex: "1",
        SHUshu: 0,
      };
    },
    created() {},
    computed: {},
    beforeRouteEnter(to, from, next) {
      if (JSON.parse(localStorage.getItem("vuex")).bool) {
        next();
     
      } else {
        next(false);
      }
    },
    mounted() {
      let shu1 = Number(this.$store.state.editableTabsValue);
      let shu = ["首页", "商品管理", "用户管理", "页面1", "页面2"];
      this.ck(this.$store.state.editableTabsValue, shu[shu1 - 1]);
    },
  
    methods: {
      qiehuan() {
        this.qiehuan1 = !this.qiehuan1;
      },
      ckx(e) {
        if (e != 0) {
          this.shu.splice(e, 1);
          if (this.SHUshu >= e) {
            this.SHUshu -= 1;
            this.tabIndex = (this.SHUshu + 1).toString();
            let shu = ["首页", "商品管理", "用户管理", "页面1", "页面2"];
            this.editableTabsValue = (
              shu.indexOf(this.shu[this.tabIndex - 1]) + 1
            ).toString();
            this.$router.push({ name: this.editableTabsValue });
          }
        }
      },
  
      SHU1(e) {
        let shu = ["首页", "商品管理", "用户管理", "页面1", "页面2"];
        this.tabIndex = (this.shu.indexOf(this.shu[e]) + 1).toString();
        this.editableTabsValue = (shu.indexOf(this.shu[e]) + 1).toString();
        this.$router.push({ name: this.editableTabsValue });
        this.SHUshu = e;
      },
      yiru(e) {
        if (e == -1) {
          this.cloSable = e;
        } else {
          this.cloSable = e;
        }
      },
      isCollapse1() {
        this.isCollapse = !this.isCollapse;
      },
      handleSelect(key, keyPath) {
     
      },
      ck(e, l) {
        if (e == "denglu") {
          this.$store.commit("akk", false);
        }
        if (!this.shu.includes(l)) {
          this.shu.push(l);
        }
        if (!isNaN(e)) {
          this.tabIndex = (this.shu.indexOf(l) + 1).toString();
          this.editableTabsValue = `${e}`;
          this.SHUshu = this.shu.indexOf(l);
     
          this.$store.commit("arc", this.editableTabsValue);
        }
        this.$router.push({ name: e });
      },
      handleOpen(key, keyPath) {
  
      },
      handleClose(key, keyPath) {
      
      },
      tabclick() {
       
      },
      removeTab(targetName) {
        let tabs = this.shu;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab;
              }
            }
          });
        }
        // 当标签页数组中只剩下一个标签页时，不再执行删除操作
        if (tabs.length > 1 && targetName !== "首页") {
          this.editableTabsValue = activeName;
          this.shu = tabs.filter((tab) => tab !== targetName);
        }
      },
  
      ck1(e, l) {
        let shu = ["首页", "商品管理", "用户管理", "页面1", "页面2"];
        this.editableTabsValue = (shu.indexOf(l) + 1).toString();
        this.tabIndex = (this.shu.indexOf(e.label) + 1).toString();
        this.SHUshu = e - 1;
        this.$router.push({ name: this.editableTabsValue });
      },
    },
  };
  </script>
  
  <style lang='less' scoped>
  .jianbuian:hover {
    background-color: #40a0ff82;
    color: #409eff;
  }
  .SHU {
    background-color: #409eff;
    color: #fff;
  }
  .SHU1 {
    outline: 1px solid #409eff;
    background-color: #fff;
    color: #409eff;
  }
  .SHU1:hover {
    background-color: #409eff;
    color: #fff;
  }
  .logo {
    color: #fff;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
  /deep/.el-tabs__item {
    height: 25px !important;
    line-height: 20px !important;
    text-align: center;
  }
  .w {
    width: 200px !important;
  }
  
  .s {
    width: 60px !important;
  }
  
  .el-menu {
    border: none;
    background-color: #333;
  }
  
  .el-header {
    .el-menu-item.is-active {
      color: #0a76e2 !important;
    }
    background-color:   #333;
    color: #00ff48;
    text-align: center;
    line-height: 40px;
    height: 60px;
  }
  
  .el-aside {
    ul {
      text-align: left;
    }
    background-color: #545c64;
    color: #e9eef3;
    text-align: center;
  }
  
  /deep/.el-menu-item.is-active {
    color:   #4658f8 !important;
  }
  
  .el-menu--horizontal > .el-menu-item {
    color: #333;
  }
  
  .el-main {
    /deep/.el-tabs__item.is-active {
      background-color: #409eff;
      color: #e9eef3;
    }
    background-color: #e9eef3;
    color: #333;
    margin: 0;
    padding: 0px;
    // text-align: center;
  }
  
  .el-container {
    height: 100vh;
  }
  
  .menu-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-color: azure;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
  
  .line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
  }
  
  .tabs-wrapper {
    outline: 1px solid red;
  }
  element.style {
      height: 20px;
      display: flex;
      margin-bottom: 4px;
      justify-content: flex-start;
  }
  </style>
  
  